<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>InputNumber 数字输入框</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">数字输入框。</p>
	<a-space style="width: 500px;">
		<a-input-number v-model:value="value1_1" :min="1" :max="10"></a-input-number>
		当前值：{{ value1_1 }}
	</a-space>
	
	<a-divider class="a-divi" orientation="left">三种大小</a-divider><!-- =============================================================== -->
	<p class="desc">三种大小的数字输入框，当 size 分别为 large 和 small 时，输入框高度为 40px 和 24px ，默认高度为 32px。</p>
	<a-space>
		<a-input-number v-model:value="value2_1" size="large" :min="1" :max="100000"></a-input-number>
		<a-input-number v-model:value="value2_2" :min="1" :max="100000"></a-input-number>
		<a-input-number v-model:value="value2_3" size="small" :min="1" :max="100000"></a-input-number>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">高精度小数</a-divider><!-- =============================================================== -->
	<p class="desc">通过 stringMode 开启高精度小数支持，change 事件将返回 string 类型。 对于旧版浏览器，你需要 BigInt polyfill。</p>
	<a-space>
		<a-input-number v-model:value="value3_1" style="width: 200px" :min="0" :max="10" :step="0.00000000000001" string-mode></a-input-number>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">键盘行为</a-divider><!-- =============================================================== -->
	<p class="desc">使用 keyboard 属性可以控制键盘行为。启用后，input框获焦状态下，可以用键盘的上下键调大小</p>
	<a-space>
		<a-input-number v-model:value="value4_1" :keyboard="keyboard4" :min="1" :max="10" :step="0.01"></a-input-number>
		<a-checkbox v-model:checked="keyboard4">Toggle keyboard</a-checkbox>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">无边框</a-divider><!-- =============================================================== -->
	<p class="desc">没有边框。</p>
	<a-space>
		<a-input-number v-model:value="value5_1" :bordered="false" :min="1" :max="10"></a-input-number>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义状态</a-divider><!-- =============================================================== -->
	<p class="desc">使用 status 为 InputNumber 添加状态，可选 error 或者 warning。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-input-number status="error" style="width: 100%"></a-input-number>
		<a-input-number status="warning" style="width: 100%"></a-input-number>
		<a-input-number status="error" style="width: 100%">
			<template #prefix>
				<Clock-circle-outlined class="ant-icon"></Clock-circle-outlined>
			</template>
		</a-input-number>
		<a-input-number status="warning" style="width: 100%">
			<template #prefix>
				<Clock-circle-outlined class="ant-icon"></Clock-circle-outlined>
			</template>
		</a-input-number>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">前置/后置标签</a-divider><!-- =============================================================== -->
	<p class="desc">用于配置一些固定组合。</p>
	<a-space direction="vertical">
		<a-input-number v-model:value="value7_1" addonBefore="+" addonAfter="$"></a-input-number>
		<a-input-number v-model:value="value7_2">
			<template #addonBefore>
				<a-select v-model:value="addonBeforeValue7" style="width: 60px">
					<a-select-option value="add">+</a-select-option>
					<a-select-option value="minus">-</a-select-option>
				</a-select>
			</template>
			<template #addonAfter>
				<a-select v-model:value="addonAfterValue7" style="width: 60px">
					<a-select-option value="USD">$</a-select-option>
					<a-select-option value="EUR">€</a-select-option>
					<a-select-option value="GBP">£</a-select-option>
					<a-select-option value="CNY">¥</a-select-option>
				</a-select>
			</template>
		</a-input-number>
		<a-input-number v-model:value="value7_3">
			<template #addonAfter>
				<Setting-outlined class="ant-icon"></Setting-outlined>
			</template>
		</a-input-number>
		<a-input-number v-model:value="value7_4">
			<template #addonAfter>
				<a-cascader placeholder="cascader" style="width: 150px"></a-cascader>
			</template>
		</a-input-number>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">不可用</a-divider><!-- =============================================================== -->
	<p class="desc">点击按钮切换可用状态。</p>
	<a-space>
		<a-input-number v-model:value="value8_1" :min="1" :max="10" :disabled="disabled8"></a-input-number>
		<a-button type="primary" @click="toggle8">Toggle disabled</a-button>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">格式化展示</a-divider><!-- =============================================================== -->
	<p class="desc">通过 formatter 格式化数字，以展示具有具体含义的数据，往往需要配合 parser 一起使用。</p>
	<a-space>
		<a-input-number v-model:value="value9_1" :formatter="formatter9" :parser="parser9"></a-input-number>
		<a-input-number v-model:value="value9_2" :min="0" :max="100" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')"></a-input-number>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">超出边界</a-divider><!-- =============================================================== -->
	<p class="desc">当通过受控将 value 超出边界时，提供警告样式。</p>
	<a-space>
		<a-input-number v-model:value="value10_1" :min="min10" :max="max10" :status="status10"></a-input-number>
		<a-button type="primary" @click="value10_1 = 99">Reset</a-button>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">前缀</a-divider><!-- =============================================================== -->
	<p class="desc">在输入框上添加前缀图标。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-input-number v-model:value="value11_1" prefix="￥" style="width: 100%"></a-input-number>
		<a-input-number v-model:value="value11_2" prefix="￥" style="width: 100%">
			<template #addonBefore>
				<User-outlined class="ant-icon"></User-outlined>
			</template>
		</a-input-number>
		<a-input-number v-model:value="value11_3" prefix="￥" disabled style="width: 100%"></a-input-number>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">图标按钮</a-divider><!-- =============================================================== -->
	<p class="desc">使用 upIcon downIcon 插槽自定义图标。</p>
	<a-space>
		<a-input-number v-model:value="value12_1" :min="1" :max="10">
			<template #upIcon>
				<Arrow-up-outlined class="ant-icon"></Arrow-up-outlined>
			</template>
			<template #downIcon>
				<Arrow-down-outlined class="ant-icon"></Arrow-down-outlined>
			</template>
		</a-input-number>
	</a-space>
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		value1_1: 3,
		
		value2_1: 3,
		value2_2: 3,
		value2_3: 3,
		
		value3_1: 1,
		
		value4_1: 7,
		keyboard4: true,
		
		value5_1: 5,
		
		value7_1: 100,
		value7_2: 100,
		value7_3: 100,
		value7_4: 100,
		addonBeforeValue7: 'add',
		addonAfterValue7: 'USD',
		
		value8_1: 3,
		disabled8: true,
		
		value9_1: 1000,
		value9_2: 100,
		
		status10: '',
		min10: 1,
		max10: 10,
		value10_1: 99,
		
		value11_1: 1,
		value11_2: 2,
		value11_3: 3,
		
		value12_1: 1,
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		// console.log("仅在整个视图都被渲染之后才会运行的代码");
		// this.$refs.myParRef.focus();		//让myParRef组件自动获取焦点，但没生效
		this.verify10();
	});
	// console.log("实例挂载完成后被调用2");
},
methods:{
	toggle8(){
		this.disabled8 = !this.disabled8;
	},
	formatter9(value, info){
		// console.log(value);
		// console.log(info);
		return `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	},
	parser9(value){
		// console.log(value);
		return value.replace(/\$\s?|(,*)/g, '');
	},
	verify10(){
		if(this.value10_1 < this.min10 || this.value10_1 > this.max10){
			this.status10 = 'error';
		}else{
			this.status10 = '';
		}
	},
	
},
watch:{
	value10_1:function(value){
		this.verify10();
		// console.log('value10_1 的值为：' +value);
	},
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
